<!-- 评论组件（精选口碑） 下方为5个滚动评论-->
<template>
  <div id="comment">
    <!-- 精选口碑 -->
    <div class="evaTop">
      <div class="evaTitle flex-a-c">
        <span>精选口碑</span>
        <i  class="score"> {{score}}</i>
        <i style="color: #999; font-size: 12px;" class="praise"> 好评率</i>
        
      </div>
      <div class="evaTo flex-a-c"  @click="gotoCommentList()">
        查看全部({{total}})&nbsp;
        <i class="fa fa-angle-right" style="font-size: 16px;"></i>
      </div>
    </div>
    <div class="ecaBottom"
         v-if="!fun.isTextEmpty(commentInfo)">
      <van-swipe :loop="false"
                 :width="215"
                 class="evaLoop"
                 :show-indicators='false'>
        <van-swipe-item v-for="item in commentInfo.slice(0,5)"
                        :key="item.id">
          <div class="evaLoopmain">
            <div class="evaLoop-user flex-a-c">
              <img :src="item.head_img_url"
                  alt="">
              <div class="user">
                <div class="username">{{item.nick_name}}</div>
                <div class="rate">
                  <van-rate v-model="item.level"
                            style="text-align: left;"
                            :size="12"
                            disabled-color="#ff9900"
                            disabled />
                </div>
              </div>
            </div>
            
            <div class="text"
                 style="-webkit-box-orient: vertical;" v-if="item.content">{{item.content}}</div>
                 <div class="text"
                 style="-webkit-box-orient: vertical;" v-else>此用户未写详细评价~</div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div v-if="fun.isTextEmpty(commentInfo)"
         style="padding: 0.875rem; color: #999;">抱歉，暂无评论 ~</div>
  </div>
</template>

<script>
export default {
  props: ["commentInfo", "goods_id", "isCup", "score", "total", "type"],
  data() {
    return {};
  },
  methods: {
    gotoCommentList() {
      if (this.type == 2) {
        this.$router.push(
          this.fun.getUrl("o2oStore_v2", {
            store_id: this.$route.params.store_id,
            fromHome: 1,
            activeType: "comment"
          })
        );
      } else {
        this.$emit("RouterTo", true);
      }
    }
  }
};
</script>
<style lang='scss' rel='stylesheet/scss' scoped>
#comment {
  margin-top: 0.75rem;
  background: #fff;
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  .evaTop {
    padding: 19px 12px 0 12px;
    // height: 2.375rem;
    // line-height: 2.375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .evaTitle {
      span {
        font-size: 1rem;
        line-height: 1rem;
        color: #00001C;
        font-weight: bold;
        padding:0 0.375rem 0 0;
      }
      .score {
        font-weight: bold;
        font-size: 1.0625rem;
        line-height: 1.0625rem;
        color: #FFA32B;
      }
      .praise {
        font-size: 0.8125rem;
        line-height: 0.8125rem;
        color: #6E6E79;
        padding:0 0 0 0.3125rem;
      }
    }
    .evaTo {
      display: flex;
      align-items: center;
      font-size: 0.8125rem;
      color: #6E6E79;
      line-height: 0.8125rem;
    }
  }

  .ecaBottom {
    .evaLoop {
      text-align: left;
      padding: 0 0 5px 0;
      .evaLoopmain {
        display: flex;
        flex-wrap: wrap;
        padding: 0.75rem 0.75rem 0.3125rem 0.75rem;
        width: 12.5rem;
        height: 6.25rem;
        overflow: hidden;
        margin: 0.75rem 0.75rem 0.3125rem 0.75rem;
        border-radius: 0.375rem;
        background: linear-gradient( 180deg, #FFF8F3 0%, #FFFFFF 100%);
        border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
        .evaLoop-user {
          padding:0 0 9px 0;
        }
        img {
          width: 2.25rem;
          height: 2.25rem;
          border-radius: 100%;
          margin-right: 0.5rem;
        }

        .user {
          flex: 8;

          .username {
            font-weight: bold;
            font-size: 0.9375rem;
            color: #3B3B4A;
            width: 5rem;
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
            white-space: nowrap; /* 规定段落中的文本不进行换行 */
          }
        }

        .text {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          font-size: 0.8125rem;
          // line-height: 13px;
          color: #6E6E79;
          // line-height: 18px;
        }
      }
    }
  }
}
</style>
